<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>手机计算器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        #head{
            width: 100%;
            background: black;
        }
        #head #head-top{
            height:192px;
            color: #fff;
            text-align: right;
            position: relative;
        }
        #head #head-top #dd{
            position: absolute;
            right: 0;
            bottom: 0;
            font-size:100px;
        }
        #head #center-btn .bths{
            float: left;
            font-size:60px;
        }
        #head #center-btn .bths .btn{
            text-align:center;
            display:flex;
            justify-content:center;
            align-items:center;
            background: #D4D5D7;
            border-right:1px solid black;
        }
        .f1{
            float: left;
        }
        #head #center-btn .bths{
            width: 100%;
            height: 100%;
            font-size:40px;
        }
        #head #center-btn .w{
            width:24.7%;
            height:94px;
        }
        #head #center-btn .bths .w1{
            width:49.6%;
            height:94px;
        }
        #head #center-btn .bths {
            border-bottom:1px solid black;
        }
        #head #center-btn .bths .bg{
            background: #c9302c;
           color: #fff;
        }
    </style>
</head>
<body>
<div id="head">
    <div id="head-top">
        <div id="dd">0</div>
    </div>
    <div id="center-btn">
        <div class="bths clearfix">
            <div class="btn w f1" onclick="qingling()">AC</div>
            <div class="btn w f1">+/-</div>
            <div class="btn w f1" onclick="yu()">%</div>
            <div class="btn w f1 bg" onclick="chu()">÷</div>
        </div>
        <div class="bths clearfix">
            <div class="btn w f1" onclick="show7()">7</div>
            <div class="btn w f1" onclick="show8()">8</div>
            <div class="btn w f1" onclick="show9()">9</div>
            <div class="btn w f1 bg" onclick="cheng()">×</div>
        </div>
        <div class="bths clearfix">
            <div class="btn w f1" onclick="show4()">4</div>
            <div class="btn w f1" onclick="show5()">5</div>
            <div class="btn w f1" onclick="show6()">6</div>
            <div class="btn w f1 bg" onclick="jian()">-</div>
        </div>
        <div class="bths clearfix">
            <div class="btn w f1" onclick="show1()">1</div>
            <div class="btn w f1" onclick="show2()">2</div>
            <div class="btn w f1" onclick="show3()">3</div>
            <div class="btn w f1 bg" onclick="jia()">+</div>
        </div>
        <div class="bths clearfix">
            <div class="btn w1 f1" onclick="show0()">0</div>
            <div class="btn w f1">.</div>
            <div class="btn w f1 bg" onclick="suan()">=</div>
        </div>
    </div>
</div>



<script>
    function show0() {
        dd.innerHTML="0";
    }
    function qingling() {
        dd.innerHTML="0";
    }
    function show1() {
        if (dd.innerHTML=="0"){
                dd.innerHTML="1";
        } else{
            dd.innerHTML=dd.innerHTML+"1";
        }
    }
    function show2() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="2";
        } else{
            dd.innerHTML=dd.innerHTML+"2";
        }
    }
    function show3() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="3";
        } else{
            dd.innerHTML=dd.innerHTML+"3";
        }
    }
    function show3() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="3";
        } else{
            dd.innerHTML=dd.innerHTML+"3";
        }
    }
    function show4() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="4";
        } else{
            dd.innerHTML=dd.innerHTML+"4";
        }
    }
    function show5() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="5";
        } else{
            dd.innerHTML=dd.innerHTML+"5";
        }
    }
    function show6() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="6";
        } else{
            dd.innerHTML=dd.innerHTML+"6";
        }
    }
    function show7() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="7";
        } else{
            dd.innerHTML=dd.innerHTML+"7";
        }
    }
    function show8() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="8";
        } else{
            dd.innerHTML=dd.innerHTML+"8";
        }
    }
    function show9() {
        if (dd.innerHTML=="0"){
            dd.innerHTML="9";
        } else{
            dd.innerHTML=dd.innerHTML+"9";
        }
    }

    var num1;
    var num2;
    var fuhao;
    function jia() {
        num1=parseInt(dd.innerHTML);
        dd.innerHTML="";
        fuhao="+";
    }
    function jian() {
        num1=parseInt(dd.innerHTML);
        dd.innerHTML="";
        fuhao="-";
    }
    function cheng() {
        num1=parseInt(dd.innerHTML);
        dd.innerHTML="";
        fuhao="*";
    }
    function chu() {
        num1=parseInt(dd.innerHTML);
        dd.innerHTML="";
        fuhao="/";
    }
    function yu() {
        num1=parseInt(dd.innerHTML);
        dd.innerHTML="";
        fuhao="%";
    }
    function suan() {
        num2=parseInt(dd.innerHTML)
        if (fuhao=="+"){
            dd.innerHTML=num1+num2;
        }else if (fuhao=="-"){
            dd.innerHTML=num1-num2;
        } else if (fuhao=="*"){
            dd.innerHTML=num1*num2;
        }else{
            dd.innerHTML=num1/num2;
        }
    }
</script>
</body>
</html>